<template>
  <div class="content theater">
    <el-form
      ref="form"
      :rules="rules"
      :model="fromData"
      label-position="top"
      label-width="100px"
      class="form"
    >
      <el-form-item
        label="短剧名称"
        prop="playlet_id"
      >
        <selectPlaylet
          type="playlet"
          :is-disabled="true"
          :is-show="true"
          @result="playletSelect"
        />
        <!-- <el-select v-model="fromData.playlet_id" style="width:100%;" placeholder="请选择" class="input" filterable @change="playletSelect">
          <el-option v-for="item in optionsList.playletList" :key="item.value" :disabled="item.is_exist && item.is_exist===1?true:false" :label="item.label" :value="item.value"> </el-option>
        </el-select> -->
      </el-form-item>
      <!-- <el-form-item label="展示位置">
        <el-select v-model="fromData.type" multiple collapse-tags placeholder="请选择" class="input">
          <el-option v-for="item in optionsList.playletStatus" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item
        label="定价"
        prop="pay_coin"
      >
        <div class="payinput rowFlex">
          <el-input
            v-model="fromData.pay_coin"
            clearable
            style="width:320px;"
            oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
          ></el-input>
          <div class="unit">虚拟币/集</div>
        </div>
      </el-form-item>
      <el-form-item
        label="开始付费剧集"
        prop="start_pay_chapter"
        class="chapter"
      >
        <el-select
          v-model="fromData.start_pay_chapter"
          clearable
          placeholder="请选择短剧"
          style="width:100%;"
        >
          <el-option
            v-for="item in chapterList"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button
          class="btn"
          @click="close"
        >取 消</el-button>
        <el-button
          class="btn"
          type="primary"
          :loading="loading"
          @click="onSubmit"
        >确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { commonData } from '@/api/common'
import { validateCoin, validateStart } from '@/utils/index'
import { POST_mini_app_playlet_save } from '@/api/appContent/theater'
import { mapState } from 'vuex'
export default {
  name: 'Theater',
  computed: {
    ...mapState('user', ['mini_app_id', 'menu'])
  },
  data() {
    return {
      loading: false,
      fromData: {
        mini_app_id: window.localStorage.getItem('mini_app_id'),
        playlet_id: '',
        start_pay_chapter: '',
        pay_coin: ''
      },
      chapterList: [],
      rules: {
        playlet_id: [{ required: true, message: '请选择短剧', trigger: 'blur' }],
        pay_coin: [
          { required: true, message: '输入定价', trigger: 'blur' },
          { required: true, validator: validateCoin, trigger: 'blur' }
        ],
        start_pay_chapter: [
          { required: true, message: '收费剧集最小为1', trigger: 'blur' },
          { required: true, validator: validateStart, trigger: 'change' }
        ]
      },
      optionsList: {
        playletList: [],
        playletStatus: []
      }
    }
  },
  watch: {
    'fromData.playlet_id'(newVal, oldVal) {
      this.rules.pay_coin = [
        { required: true, message: '输入定价', trigger: 'blur' },
        { required: true, validator: validateCoin, trigger: 'blur', playlet_id: newVal }
      ]
    }
  },
  mounted() {
    this.onGetPlayletList()
    this.onGetplayletStatus()
  },
  methods: {
    async onSubmit() {
      this.loading = true
      const params = {
        ...this.fromData
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          // const value = this.optionsList.playletList.find((item) => {
          //   return item.value === this.fromData.playlet_id
          // })
          // const miniapp = this.menu.find(item => item.id == this.mini_app_id)
          // console.log(value, miniapp)
          // if (miniapp && miniapp.app_type == 1 && value.check_status != 2) {
          //   this.$message.warning('微信小程序中，只能上架审核通过的合同剧或版本剧（版本剧关联的合同剧必须为审核通过状态)')
          //   return false
          // }
          POST_mini_app_playlet_save(params).then((res) => {
            if (res.status_code === 1) {
              this.$message.success(res.msg)
              this.$emit('ok')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      this.loading = false
    },
    playletSelect(value) {
      this.fromData.playlet_id = value
      this.reqeustChapter(value)
    },
    reqeustChapter(value) {
      commonData({ type: 'playletChapter', value: value }).then((res) => {
        if (res.status_code === 1) {
          this.chapterList = res.data.data
        }
      })
    },
    close() {
      this.$emit('ok')
    },
    async onGetPlayletList() {
      const res = await commonData({
        type: 'playlet',
        mini_app_id: window.localStorage.getItem('mini_app_id')
      })
      if (res.status_code === 1) {
        this.optionsList.playletList = res.data.data
      }
    },
    async onGetplayletStatus() {
      const res = await commonData({
        type: 'playletStatus'
      })
      if (res.status_code === 1) {
        this.optionsList.playletStatus = res.data.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  ::v-deep .el-form-item__label {
    font-weight: 600;
  }
  .input {
    width: 250px;
  }
  .form {
    padding: 20px;
  }
  .payinput {
    display: flex;
    .unit {
      display: flex;
      width: 70px;
      margin-left: 10px;
    }
  }
  .chapter {
    ::v-deep .el-form-item__label {
      line-height: 20px;
    }
  }
}
</style>